<template>
  <div class="main-container">
    <div v-if="showHomeDom" class="home-container" v-dialogDrag>
      <home-left class="home-left" :style="style1" v-show="!showDetail"></home-left>
      <home-map ref="HomeMap" class="home-map" :style="style2"></home-map>
      <home-right class="home-right" :style="style3" :canShowDouble="carouselFlag" v-show="!showDetail"></home-right>
      <!-- 如果不是三维地图，则显示天气 -->
      <weather class="home-weather" :style="styleWeather"></weather>
      <!-- 详情页 -->
      <detail class="detail-page" v-show="showDetail" :openDetail="openDetail"></detail>
      <!-- 弹框 -->
      <popup v-show="showDialog" class="popup-dialog" :openDialog="openDialog"></popup>
      <!--语义识别结果播报弹框-->
      <audio-discern class="show-audio-discern" v-show="showAudioDiscern" :openAudioDispcernHome="openAudioDiscern"></audio-discern>
      <!--语义识别结果处理弹框-->
      <audio-dispose class="show-audio-dispose" v-show="showAudioDispose" :openAudioDisposeHome="openAudioDispose"></audio-dispose>
    </div>
  </div>
</template>

<script>
import HomeLeft from './HomeLeft'
import HomeMap from '../Map/Main'
import HomeRight from './HomeRight'
import Weather from '../Weather/Main'
import Popup from '../Popup/Main'
import Detail from '../Detail/Main'
import AudioDiscern from '../Audio/AudioDiscern'
import AudioDispose from '../Audio/AudioDispose'
import { getOrgsStatusList } from '@/api/organization'
import { getAuthOrgs } from '@/api/video'
export default {
  name: 'Home',
  components: {
    HomeLeft,
    HomeRight,
    HomeMap,
    Weather,
    Popup,
    Detail,
    AudioDiscern,
    AudioDispose,
  },
  data() {
    return {
      style1: {
        width: this.bsConfig.LeftMenu.width,
      },
      style2: {
        width: this.bsConfig.MapOptions.width,
        height: this.bsConfig.MapOptions.height,
        right: (100 - parseFloat(this.bsConfig.MapOptions.width || 0)) / 2 + '%',
      },
      style3: {
        width: this.bsConfig.RightMenu.width,
      },
      styleWeather: {
        right: this.bsConfig.RightMenu.width,
      },
      showDialog: false, // 是否显示弹框
      isOpenChilid: false,
      platformId: localStorage.getItem('ilinkBs_platformId'),
      orgIds: this.$store.state.userInfo.organizationIds,
      showMapType:
        this.$store.state.userInfo.mapType && !this.$store.state.userInfo.isMuilUnitUser
          ? this.$store.state.userInfo.mapType
          : this.bsConfig.MapOptions.defultMap,
      markTyps: this.bsConfig.HomeMarkTypes, // 标注类型集合
      showHomeDom: true,
      showDetail: false, // 是否展示详情页
      showAudioDiscern: false, // 是否展示语义识别结果弹框
      showAudioDispose: false, // 是否展示语义识别结果处理弹框
      isMuilUnitUser: this.$store.state.userInfo.isMuilUnitUser, // 0:单单位用户;1:多单位用户
      carouselFlag: true, // true 轮播  false 平铺
    }
  },
  created() {
    let that = this
    //在初始化地图前，告诉前端配置中的地图类型
    localStorage.setItem('ilinkBs_currentMapType', that.showMapType)

    window.FunList.changeLeftRightSize = this.changeLeftRightSize

    window.FunList.initMap = this.initMap

    this.getOrgsStatusList()

    that.initMap() //获取地图初始化数据等

    if (typeof WebSocket === 'undefined') {
      console.error('您的浏览器不支持socket')
    } else {
      //推送只推一级首页
      setTimeout(() => {
        that.$Ctl.init_webSocket()
      }, 1000)
    }
    // 初始化缓存中的路由数组
    that.$Ctl.initRouteList()
    //如果在客户端，初始化视频客户端
    that.intVideo()
  },
  methods: {
    getOrgsStatusList() {
      getOrgsStatusList({
        orgIds: this.orgIds,
      }).then((res) => {
        if (res.status === 200) {
          this.$store.commit('setOrgList', res.data.orgDetail)
        }
      })
    },
    changeLeftRightSize(sizeObj) {
      //控制二维场景左右侧大小
      let that = this
      that.style1.width = sizeObj.leftWidth || '20%'
      that.style3.width = sizeObj.rightWidth || '20%'
      that.styleWeather.right = sizeObj.rightWidth || '20%'
    },
    initMap(_mapType = this.showMapType, _orgIds = this.orgIds) {
      //初始化地图
      let that = this
      //如果是在网页端访问且地图展示的是三维，则展示百度地图
      if (_mapType == 3 && !that.$Ctl.isCs()) {
        _mapType = 1
      }
      if (_mapType == 3 && that.$Ctl.isCs()) {
        that.showHomeDom = false
        that.intCs()
      } else {
        that.showHomeDom = true
        that.$Ctl.setMapOptions(
          that.isMuilUnitUser ? that.platformId : _orgIds,
          _mapType,
          (gisInfo) => {
            if (_mapType == 4) {
              // 避免unity地图重复初始化
              if (!window.unityInstance) {
                window.FunList.drawMapBydata(4, gisInfo)
              }
              that.$Ctl.changePageSize(2) //左右两边大小适配
              this.$store.commit('setCurrentMapType', _mapType)
            } else {
              that.$Ctl.intMapMarks(_orgIds, that.markTyps, gisInfo)
              that.$Ctl.changePageSize(2) //左右两边大小适配
            }
          },
          that.isMuilUnitUser ? 0 : 1
        )
      }
      that.$Ctl.isCs() && that.$Cs.loadingControl(10000)
    },
    intCs() {
      //初始化三维相关
      let that = this

      that.$Ctl.changePageSize(2) //左右两边大小适配

      //告诉C端，打开首页
      that.$Cs.entryPageType(2)
      //初始化三维和地图
      that.$Ctl.setMapOptions(that.platformId, 3)
      //天气
      that.$Cs.menuGroups('', '10105,10106')
    },
    // 详情页的关闭显示
    openDetail(flag) {
      this.showDetail = flag || false
      // 摧毁平台管理服务器性能检测的定时器任务
      if (window.setverMonitorInterValObj) {
        clearInterval(window.setverMonitorInterValObj)
        window.setverMonitorInterValObj = null
      }
      // 摧毁AI云视的定时器任务
      if (window.AICloudVideoSwitchInterval) {
        clearInterval(window.AICloudVideoSwitchInterval)
        window.AICloudVideoSwitchInterval = null
      }
    },
    // 弹框关闭显示
    openDialog(flag) {
      this.showDialog = flag || false
      if (window.t1) {
        clearInterval(window.t1._id)
        window.t1 = null
      }
    },
    // 语义识别结果弹框关闭显示
    openAudioDiscern(flag) {
      this.showAudioDiscern = flag || false
    },
    // 语义识别结果处理弹框关闭显示
    openAudioDispose(flag) {
      this.showAudioDispose = flag || false
    },
    intVideo() {
      let that = this
      if (that.$Ctl.isCs()) {
        let _orgid = that.$store.state.userInfo.org.id
        getAuthOrgs({
          orgId: that.$store.state.userInfo.org.id,
          orgCode: localStorage.getItem('ilinkBs_platformCode'),
          equiptType: 0,
        }).then((res) => {
          if (res.status == 200) {
            that.$Cs.presetVideo(_orgid, '', JSON.stringify(res.data), 1)
          }
        })
      }
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss">
.main-container,
.home-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.home-container {
  .home-left {
    height: 100%;
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
  }
  .home-map {
    z-index: 1;
    position: absolute;
    top: 0;
  }
  .home-right {
    height: 100%;
    z-index: 2;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    justify-content: flex-end;
  }
  .home-weather {
    z-index: 2;
    position: absolute;
    top: 33px;
    right: 20%;
  }
  .home-tools {
    z-index: 10;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60px;
  }
  .detail-page {
    z-index: 4;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .popup-dialog {
    position: fixed;
    overflow: hidden;
    width: 660px;
    height: 600px;
    z-index: 999;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    margin-left: -350px;
  }
  .show-audio-discern {
    position: fixed;
    width: 900px;
    min-height: 100px;
    z-index: 9999;
    bottom: 0;
    left: 480px;
  }
  .show-audio-dispose {
    position: fixed;
    width: 646px;
    min-height: 486px;
    z-index: 9999;
    bottom: 15%;
    left: calc(50% - 323px);
  }
  &.lower-zindex{
    .show-audio-discern,
    .show-audio-dispose,
    .number-desk-drawer{
      z-index: 1;
    }
  }
}
</style>
